/*
* useRef 是一个函数，是在 react 里面提供好的，我们可以通过该函数来获取页面的dom元素。
* */
import {useRef} from 'react'

function Counter() {
    //组件内部维护的数据
    let count = 1;
    let dom = useRef()
    console.log(dom, dom.current, 'dom'); // dom 变量就可以获取到到对应的dom元素

    /*在 react 里面，默认情况下，如果我们对组件内部的数据做更改后，页面并不会渲染最新的数据。 类似 vuejs里面要学习的 双向数据绑定。*/
    function increment() {
        count++;
        console.log('increment', count);
        /*现在学习前端框架，都讲究 数据驱动，不建议开发者在使用框架的时候，还自己手工的去做dom的操作，这样是不合适的。就算要去操作元素，也不要使用这种原生的 api（document.getElementById('container')） 去获取dom元素。react里面有提供相关的 api 可以获取到dom元素*/
        // document.getElementById('container').innerText = count;
        dom.current.innerText = count;
    }

    function decrement() {

        count--;
        console.log('decrement', count);
        // document.getElementById('container').innerText = count;
        dom.current.innerText = count;
    }

    return (
        <div>
            <h1>我是一个计数器</h1>
            <button onClick={increment} style={{fontSize: '30px'}}>+</button>
            <b id="container" ref={dom}>{count}</b>
            <button onClick={decrement} style={{fontSize: '30px'}}>-</button>
        </div>
    )
}

export default Counter;
